<template>
  <van-form @submit="onSubmit" class="form">
    <!-- <div class="uploader-box">
      <van-uploader
        :after-read="afterRead"
        v-model="fileList"
        :max-count="1"
        label="头像上传"
      >
        <template #preview-cover>
          <div class="preview-cover van-ellipsis">用户头像</div>
        </template>
      </van-uploader>
    </div> -->
    <van-field
      v-model="userInfo.account"
      clearable
      name="account"
      label="账号"
      label-width="50"
      placeholder="账号"
      :rules="[{ required: true, message: '请填写账号' }]"
    />
    <van-field
      v-model="userInfo.userName"
      clearable
      name="userName"
      label="用户名"
      label-width="50"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="userInfo.password"
      clearable
      type="password"
      name="password"
      label-width="50"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
      v-model="userInfo.bindingEmail.email"
      center
      clearable
      name="userEmail"
      label="邮箱"
      label-width="50"
      placeholder="请输入邮箱"
      :rules="[{ pattern: patternReg.email, message: '请输入正确内容' }]"
    >
      <template #button>
        <countDown :content="'发送验证码'" :seconds="30" :reg="patternReg.email" :waitVerifyContext="userInfo.bindingEmail.email" @sendSomething="sendEmail" />
      </template>
    </van-field>
    <van-field
      v-model="userInfo.bindingEmail.authCode"
      name="authCode"
      label="验证码"
      placeholder="邮箱验证码"
      label-width="50"
      :rules="[{ required: true, message: '请填写邮箱验证码' }]"
    />
    <!-- <van-field name="uploader" label="头像上传">
      <template #input>
        <van-uploader v-model="uploader" />
      </template>
    </van-field> -->
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script>
import { sendEmail, doRegin } from '@/api/userApi';
import countDown from './utils/count-down.vue';
export default {
  name: "reginForm",
  components: {
    countDown
  },
  data() {
    return {
      userInfo: {
        userName: "",
        account: "",
        password: "",
        bindingEmail: {
            authCode: "",
            email: ""
        },
      },
      fileList: [],
      patternReg: {
        email:
          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      },
    };
  },
  methods: {
    async onSubmit(values) {
      let res = await doRegin(this.userInfo);
      if (res.code === 200 && res.success) {
        this.$notify({
          type: "success",
          message: "注册成功",
        });
        this.$emit("gotoLogin", values);
      } else {
        this.$notify({
          type: "danger",
          message: "注册失败",
        });
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    async sendEmail(email) {
      if (email && this.patternReg.email.test(email)) {
        let messageObj = {
            type: "danger",
            message: "验证码发送失败",
        };
        try {
          let res = await sendEmail(email);
          console.log(res);
          if (res.code === 200 && res.data) {
            messageObj = {
              type: "success",
              message: "验证码发送成功",
            };
          }
        } catch (error) {
        }
        this.$notify(messageObj);
      } else {
        this.$notify({
          type: 'danger',
          message: '请正确填写邮箱'
        });
      }
    },
    // 将数据改造成服务器需要的格式
    formatData(values) {
      let temp = {
        account: values.account,
        bindingEmail: {
          authCode: temp.authCode,
          email: temp.email
        },
        password: values.password,
        userName: values.userName
      }
      return temp;
    }
  },
};
</script>

<style lang="scss" scoped>
.sendEmail {
  width: 60px;
  margin-left: 8px;
  // padding-left: 5px;
}
// .form {
//     background-color: rgba(255, 255, 255, .3);
//     padding: 20px;
//     border-radius: 10px;

//     .uploader-box {
//       width: 100%;
//       display: flex;
//       justify-content: center;
//     }

//     .van-field {
//       background-color: rgba(255, 255, 255, .7);
//       border-radius: 10px;
//       margin-bottom: 10px;
//     }

//     .van-button {
//       margin: 0 auto;
//       width: 70%;
//     }
// }
// .preview-cover {
//     position: absolute;
//     bottom: 0;
//     box-sizing: border-box;
//     width: 100%;
//     padding: 4px;
//     color: #fff;
//     font-size: 12px;
//     text-align: center;
//     background: rgba(255, 255, 255, 0.7);
//   }
</style>
